import {View,ScrollView,Text,StyleSheet,TouchableOpacity, ImageBackground,Image, TextInput} from 'react-native';
import React from 'react';
import { Feather } from '@expo/vector-icons';
import { EvilIcons } from '@expo/vector-icons';
import Swiper from 'react-native-swiper';
import './global';

const Community=({navigation})=>{
    return(
        <ScrollView style={{backgroundColor:'white',height:'100%',width:'100%'}}>
            <Swiper
                style={styles.wrapper}
                showsButtons={false}
                loop={true}
                autoplay={true}
                autoplayTimeout={3.0}
                onIndexChanged={(index) => { }}
                showsPagination={true}
                paginationStyle={{bottom:p2d(50)}}
                dotStyle={{height:p2d(10),width:p2d(50),borderRadius:p2d(12),opacity:0.8}}
                activeDotStyle={{height:p2d(10),width:p2d(50),borderRadius:p2d(12),opacity:0.8}}
                dotColor='white'
                activeDotColor='lightblue'
            >
                <View style={styles.slide}>
                    <Image resizeMode='cover'
                        source={require('../assets/bg7.png')}
                        style={styles.bg} />
                            
                </View>
                <View style={styles.slide}>
                    <Image resizeMode='cover'
                        source={require('../assets/bg8.png')}
                        style={styles.bg} />
                        
                </View>
                <View style={styles.slide}>
                        
                    <Image resizeMode='cover'
                        source={require('../assets/bg9.png')}
                        style={styles.bg} />
                        
                </View>
                <View style={styles.slide}>
                        
                    <Image resizeMode='cover'
                        source={require('../assets/bg10.png')}
                        style={styles.bg} />
                        
                </View>
            </Swiper>
            <TouchableOpacity style={styles.speakbutton} onPress={() =>navigation.navigate('Speak')}>
                <Text style={styles.speak}>发言</Text>
            </TouchableOpacity>
            <View style={styles.search}>
                <EvilIcons name="search" size={p2d(50)} color="black" style={{position:'absolute',top:p2d(5),left:p2d(10)}}/>
                <TextInput 
                    placeholder="搜索"
                    style={styles.textinput}
                    secureTextEntry={true}>
                </TextInput>
            </View>

            <View style={styles.sort}>
                <View style={styles.sort1}>
                    <Image
                    resizeMode='cover'
                    source={require('../assets/sort1.jpg')}
                    style={styles.sortimage} />
                    <Text  style={styles.font}>最新话题</Text>
                </View>

                <View style={styles.sort2}>
                    <Image
                    resizeMode='cover'
                    source={require('../assets/sort2.jpg')}
                    style={styles.sortimage} />
                    <Text style={styles.font}>香水闲谈</Text>
                </View>

                <View style={styles.sort3}>
                    <Image
                    resizeMode='cover'
                    source={require('../assets/sort3.jpg')}
                    style={styles.sortimage} />
                    <Text style={styles.font}>荐香求助</Text>
                </View>

                <View style={styles.sort4}>
                    <Image
                    resizeMode='cover'
                    source={require('../assets/sort4.jpg')}
                    style={styles.sortimage} />
                    <Text style={styles.font}>有关气味</Text>
                </View>

                <View style={styles.sort5}>
                    <Image
                        resizeMode='cover'
                        source={require('../assets/sort5.jpg')}
                        style={styles.sortimage} />
                    <Text style={styles.font}>小众沙龙</Text>
                </View>

                <View style={styles.sort6}>
                    <Feather name="more-horizontal" size={p2d(120)} color="white" style={styles.sortimage}/>
                    
                </View>
                <Text style={styles.font2}>更多</Text>
                
            </View>
            

            <View style={styles.commentarea}>
                <Image
                source={require('../assets/user.jpg')}
                style={styles.userimage} />
                <Text style={styles.username}>用户01</Text>
                <Text style={styles.time}>时间</Text>
                <Text style={styles.context}>适合30+夏天的香水</Text>
            </View>
            <View style={styles.commentarea}>
                <Image
                source={require('../assets/user.jpg')}
                style={styles.userimage} />
                <Text style={styles.username}>用户02</Text>
                <Text style={styles.time}>时间</Text>
                <Text style={styles.context}>适合20+夏天的香水</Text>
            </View>
            <View style={styles.commentarea}>
                <Image
                source={require('../assets/user.jpg')}
                style={styles.userimage} />
                <Text style={styles.username}>用户03</Text>
                <Text style={styles.time}>时间</Text>
                <Text style={styles.context}>适合40+夏天的香水</Text>
            </View>
        </ScrollView>
    )
}

const styles = StyleSheet.create({
    speakbutton:{
        position:'absolute',
        right:p2d(20),
        top:p2d(50),
        borderWidth:p2d(2),
        borderColor:'black',
        borderRadius:p2d(20),
        height:p2d(50),
        width:p2d(100),
    },
    speak:{
        fontSize:p2d(27),
        lineHeight:p2d(40),
        textAlign:'center',
        color:'black',
    },
    bg:{
        height:p2d(400),
        width:'100%',
    },
    wrapper:{
        height:p2d(400),
    },
    search:{
        position:'absolute',
        backgroundColor:'white',
        opacity:0.7,
        width:'60%',
        height:p2d(50),
        top:p2d(50),
        left:p2d(150),
        borderRadius:p2d(20)
    },
    textinput:{
        fontSize:p2d(26),
        top:p2d(5),
        left:p2d(60),
    },
    sort:{
        borderColor:'rgba(112,128,144,0.5)',
        borderBottomWidth:p2d(2),
        height:p2d(380),
        width:'90%',
        left:p2d(40),
    },
    sort1:{
        position:'absolute',
        left:'10%',
        top:'5%',
    },
    sort2:{
        position:'absolute',
        top:'5%',
        left:'40%',
    },
    sort3:{
        position:'absolute',
        top:'5%',
        left:'70%',
    },
    sort4:{
        position:'absolute',
        top:'55%',
        left:'10%',
    },
    sort5:{
        position:'absolute',
        top:'55%',
        left:'40%',
    },
    sort6:{
        position:'absolute',
        top:'55%',
        left:'71%',
        width:p2d(130),
        borderRadius:p2d(65),
        backgroundColor:'lightblue',
    },
    sortimage:{
        width:p2d(130),
        borderRadius:p2d(65),
        left:p2d(5)
    },
    font:{
        fontSize:p2d(30),
    },
    font2:{
        fontSize:p2d(30),
        position:'absolute',
        left:'76%',
        top:'88%'
    },
    userimage:{
        height:p2d(100),
        width:p2d(100),
        borderRadius:p2d(50),
        left:p2d(20),
        top:p2d(20),

    },
    commentarea:{
        height:p2d(400),
        borderBottomWidth:p2d(2),

    },
    username:{
        fontSize:p2d(30),
        left:p2d(130),
        position:'absolute',
        top:p2d(30),
    },
    time:{
        fontSize:p2d(26),
        left:p2d(130),
        position:'absolute',
        top:p2d(70),
        color:'grey',
    },
    context:{
        fontSize:p2d(30),
        color:'#696969',
        position:'absolute',
        top:p2d(150),
        left:p2d(20),
    },

})

export default Community;